My Blogs

In this article, we are going to explore what a particle system is and how to create them in HTML5 using p5.js.

First, let's define and know what a particle system is.

Particle System is a term coined by William T. Reeves.

William "Bill" Reeves (born May 5, 1959) is a Canadian animator and technical director known for working with John Lasseter on the animated shorts Luxo Jr. and The Adventures of Andre and Wally B.

Reference: https://en.wikipedia.org/wiki/William_Reeves_(animator)

According to Wikipedia :

A particle system is a technique in game physics motion graphics, and computer graphics that uses a large number of very small sprites, 3D models, or other graphic objects to simulate certain kinds of "fuzzy" phenomena, which are otherwise very hard to reproduce with conventional rendering techniques - usually highly chaotic systems, natural phenomena, or processes caused by chemical reactions.

- According to Allen Martin here

The term, particle system is loosely defined in computer graphics. It has been used to describe modeling techniques, rendering techniques, and even types of animation

For me, Particle System is a group of particles banded together to give users feedback or emphasis based on the action they have made.

So you might be wondering what does a particle system looks like?

This is one of the pictures that I got from google, that best describes what a particle system is.

Now you might be thinking how does this weird looking animation or graphics, can be used?

Here's a sample video on what it looks when a game doesn't have a particle system:

If we see it the game looks bland and boring.

But if we add a particle system to it, it should look like this:

Now that we know what a particle system is. Let's create our own Particle System!

First, let us download p5.js here

Under the Single Files, section click p5.js.

After that let's create our project folder, and paste the p5.js, downloaded file inside the project folder

After that create 2 files, named: index.html and sketch.js, then open the project folder inside our text editor.

The contents should be like this:

Let's now put contents inside our index.html:

index.html's inside this file, we just need to reference our 2 javascript files.

Now let's proceed writing our p5.js codes

Inside our sketch.js file, write these codes:

Now let's discuss the two functions that we see on the screen:

• setup - is being called once after the p5.js has been loaded
• draw - is being called every frame after setup function has been called, p5.js by default has 60 frames per second meaning that draw is being called 60 times per second.

createCanvas - creates a canvas on our screen, with set width and height, by default we are setting it as the width and height of our browser's window.

background - defines the color of our canvas, 0 denotes that we have a black background.

Before creating our particle system, what properties should a particle system contain?

According to William T. Reeves each particle in the particle system should have the following properties

• Position - (x, y, z) position of the particle system in computer screen
• Velocity - denotes the speed and the direction of the particle system
• Color - color of each particles
• Lifetime - time when all particles should disappear 
• Age - number that alters particle's size and transparency
• Shape - shape of the particle
• Size -  size of the paritcle
• Transparency - opacity value of each particles

Now let's create our particle class having these properties, using ES6 class.

Create a new file named particle.js, and put the contents below:

After that let's import our particle.js file into our index.html

Now let's create a function to display our particle class.

Now let's create the Particle class inside our sketch.js

After we reload our page we should see something like this:

Now let's make our particle move or be animated.

Let's discuss the codes here one by one. 

Update():

add - adds two vector together, these two lines are responsible for acceleration and movement of our particle.

As you have noticed we don't have yet the age property of the particle that according to William T. Reeves, should have.

These two lines of code are responsible for that:

As we defined earlier age, defines the alteration of transparency and size of a particle

This line of code denotes the shrinkage of a particle as life decreases.

This line of code denotes the decrease of opacity value of a particle as life decreases.

After that let's call the Particle class' update function inside our sketch.js class.

Now we should be able to see something like this: 

Cool, now let's move to create our ParticleSystem class, it would be responsible for creating multiple particles and animating them.

Create a new file named particle-system.js, and put the contents below:

Let's discuss the codes here one by one. 

We have added here two new properties inside the particle-system.js:

• generationSpeed - frame speed when should we create n number of particles.
• count - n number of particles per generation 

For the following codes, I will explain it's use thru comments

generateParticles():

update():

After that let's import our particle-system.js file inside our index.html:

And now let's create a particle system every mouse click.

Let's update our sketch.js file:

After that, it should look like this:

Cool, now we're done, you are free to use the codes and use them.

Try it : https://www.openprocessing.org/sketch/745356

Download the code: https://github.com/onecompileman/particle-system

This is the continuation of the part 2 of this article series about "Making a Simple Space Shooter using p5.js and ES6".

What we have accomplished so far is to make the Player class fire bullets and to generate Enemies.

Next is let's make the game re initialize when, an Enemy collide with the Player.

1. Gameover function

We have updated the our renderPlayer()  to check if it has collided to an enemy, then repeat the game otherwise continue.

2. Stars and score

On the popular Messenger game Everwing, player earns score, when he/she catches the falling coins.  Let's make our own version of it using stars as alternative to coins.

Let's update our GameManager class, init() method :

We have added two new variables in the init() function:

- stars - will contains all the stars that is currently in the canvas.

- score - will the count of stars that the player catches

Let's now update our renderEnemies method inside the GameManager class, to create a star every time an enemy dies.

After that, we just need to show the stars by creating a new method inside GameManager class named renderStars(), it shows and updates star's position and also check if the star collided to the player

remove the star and increments the score.

Let's now create a new method on our GameManager class named renderScore(), to display the score :

Now we are all set, let's call all the new methods we have added, in the update method of our GameManager class:

Our GameManager class now should look like this: 

After we run our game it will look like this:

And that concludes our article series.

Source File: https://github.com/onecompileman/sample-space-shooter

This is the continuation of the part 1 of this article series about "Making a Simple Space Shooter using p5.js and ES6".

What we have accomplished so far is to create our GameManager class and make our Player object move to the canvas.

To continue let's make our player fire bullets.

1. Firing Bullets

Let's add a fireBullet() function to our Player class.

-fireBullet() - takes bulletImg image as an argument that is defined in our AssetManager class

-  (frameCount % this.fireRate === 0)  it will only fire every frameCount that is divisible every frameRate we defined, otherwise return null meaning no bullet will be fired at that moment

- We are using this.bulletSpeed  in negative as our y velocity since the bullet will be pointing upwards

Now let's update our GameManager class 

On the GameManager init, we added this.bullets = [];, to hold all of our bullets in the game.

- renderBullets() - show and updates all the bullets in the screen

-  this.bullets = this.bullets.filter(b => !(b.pos.y < 0));    -removes all the bullets that are leaving the screen to prevent memory leak

- We have updated renderPlayer() to invoke Player's fireBullet() function on every function call, and only add the bullet if it is not null

After running the game, we can see an output like this:

Cool now we have a Player firing bullets, next to create our enemies.

2. Enemies and Collision

Before we create our enemy class, let's add a collision detection on our GameObject class.

We are checking here if the distance from gameObject's position we are comparing it with, is less than the combination of two sizes of both gameObject, then it is colliding with each other, it will return true.

Let's now update our GameManager class. 

We have added 3 new variables  on init() method:

- enemies - to hold all the enemies that is within the game canvas

- enemyGeneration - number value that indicates for every nth frame we are creating a new set of enemies

- enemySpeed -  indicates how fast the enemy should move.

New methods:

- renderEnemies() - shows and update the enemies' position

- this.enemies = this.enemies.filter(e => !(e.life <= 0 || e.pos.y > height)); -  removes the enemy whose life is 0 or is out of the canvas.

- generateEnemy() - generates set on enemies on random position and random in count, that is based on the enemyGeneration variable

We have updated also the renderBullets() function to check if a bullet has collided to an enemy, if it has collided remove the bullet and subtracts player damage to enemy that has been hit.

After running our game again we can see this output: 

Cool! now it looks like a game now.

That ends our part 2 of this article series. 

Next Article: http://onecompileman.com/blogs/6

In this article series, we are going to create a Simple Space Shooter game in HTML5 using p5.js. 

We are going to use p5.js, a Javascript library for rendering web animations in Canvas.

To get started let us download click here.    

Select Complete Library > p5.js complete. 

We will use Kenney's Space Shooter Redux as our main game assets for this simple game, to download, click here.

Since we are using images to run in p5.js , we need to run it in a server, make sure that any version of MAMP, WAMP, or XAMPP is installed.

Once we have all the things we need to make our game, let's now get started.

1. Game Folder Structure

First let's make create our game folder and named it space-shooter.

After that let's create our the folders and files needed in our game.

Here's what our game folder should look like:

- app - will contain all our game scripts 

- assets - will contain all of our game assets and 3rd party scripts like p5.js

Next step is to move Kenney's Space Shooter Redux asset, into our game folder.

If we open it, we'll see all the assets inside it.

Here's the list of files that we will use and should it be named on to our app.

- PNG > playerShip1_red.png => assets > images > player.png

- PNG > Lasers > laserBlue01.png => assets > images > bullet.png

- PNG > Power-ups > star_gold.png => assets > images > star.png

- PNG > Enemies > [All Files Inside] => assets > images > enemies > [All file number 1.png to 20.png]

Our folder structure now should be: 

After that we are now done with the game's folder structure .

2. Setting up game scripts 

Let's now create our index.html file.

After that let's now create our main script for running all p5's main functions, sketch.js,  app > sketch.js 

- preload() is a p5.js function that runs before setup, it is usually used for preloading all the assets(images, sounds, etc) inside the game

- draw() is a p5.js function that runs every frame, in p5.js it runs on 60 fps, so this function will be called 60 times every second.

- setup() is a p5.js function that is mainly used for initializing variables, creating canvas.

-createCanvas() is a p5.js function that will create the canvas where our game will run.

- background() is a p5.js function used for setting the canvas color.

Let's now reference, the sketch.js file on to our index.html.

and now let's run the app by entering this command on VS code's terminal :

php -S localhost:8000

After running our game, we can see a blank black canvas on our window:

3. Asset Manager

Let's now load all the assets in our app, create app > asset-manager.js.

- loadImage() - will load the image based on the path provided in the parameter, and returns p5.Image object
- [...Array(20).keys()] - this code is the ES6 alternative for   for (let i = 0; i < 20; i++)  

Let's now reference, the asset-manager.js file on to our index.html.

4. Game Manager and Game Object

Let's now create a GameObject class that will be the parent class of all our game entities.

- Our GameObject class will keep track of :
  -position (pos) - x,y coordinates of the object in the canvas

  -velocity (vel) - keeps track of the x, y movement of the object in the canvas.

  - image (img) - the sprite image of the game object from the AssetManager class.

  - size (size) - the width and height size of the game object

  - life (life) - keeps track of the life of game object

  - tag (tag) - tag name to keep track on what time of game object is created.

GameObject's methods:

 - show() - render the game object inside the canvas.

   - push and pop - is a p5.js function that indicates start and end of positioning.

   - imageMode - takes parameter CORNER, CENTER ,CORNERS,  for displaying the image

   - translate - takes two parameter (x, y) to position the image.

   - image - displays the image in the canvas.

- update() - updates game object position in the canvas

   this.pos.add(this.vel) - adds the velocity to make the game object move.

Let's now reference, the game-object.js file on to our index.html.

Now let's create our player class.

It will extend the GameObject class, and add these properties: 

 -  fireRate - in every frames our player will shoot bullets

 - damage - variable that indicates the player damage to enemies

- bulletSpeed - speed of the bullet that will traverse through the canvas

Let's now reference, the player.js file on to our index.html.

- init() - will be called when the game starts, we will instantiate the player, with 0,0 velocity, cause we want the mouse to make the movement for the player

- loadAssets()  - will be called on p5 preload() function, to load all the assets that will be used in our game

- update() -will call all the game objects and render them one by one.

- renderPlayer() - will be called every update and player will follow the mouse position in the screen clamped at playerWidth / 2 and width - playerWidth / 2

 
And now let's update our sketch.js file, to call respective gameManager methods in each p5.js lifecycle methods.

After we run our game we can see this :

Cool, now we can see our player moving.

That concludes our part 1 of this article series.

Next Article: http://onecompileman.com/blogs/6

In this article we are going to solve 2 Codewars' [6th kyu ] problems using Javascript (ES6) and  discuss approaches how problems can be solved .

Codewars is a great site for improving your problem solving skills and it's also great for discovering different approaches of other developers in solving each problems.

Problems at code wars are label by difficulty as kyu, [1st kyu] being the hardest and [8th kyu] being the easiest.

Let's now start with our first problem.

1. Matrix Addition

Codewars link: https://www.codewars.com/kata/matrix-addition/train/javascript

The problem is :

The solution:

Non ES6 approach: 

We have created m as the variable that will hold the sum of cells in both a and b in same row and col.

And every row iteration we are adding an empty 1d array to m, so that we can store the sum of same cells for both a and b.

And would you believe the approach above can be reduced into a single line of code?

ES6 Approach: 

In this approach we have used arrow function of Javascript, to omit the function() keyword, to make it more shorter.

Also using arrow function would omit the return keyword.

We have used map here to mutate the matrix's value, and we have another inner map since we are dealing with 2d  array here.

Same as our solution above we have r  and c which denotes the row and column of the cells we are adding .

2. Find the unique number

Codewars link: https://www.codewars.com/kata/find-the-unique-number-1/train/javascript

The problem is :

The solution:

Non ES6 approach: 

uniqObj is a variable that will hold the unique elements in the array as key.

hasOwnProperty() is an Object method that returns a boolean value if the key already exist in the object or not, if it exists we are setting it to true meaning the it is not unique, otherwise initialize it to false.

Object.keys() gets all the keys inside the object needed to iterate into the object values to find false in it, meaning it is a unique number then return the parseInt value of that key.

ES6 Approach: 

Uses the same idea as we did above, but instead of declaring a var uniqObj and using forEach to accumulate its value, we used reduce() instead, as well as to finding which key is the only unique number.

Instead of using if in checking to the unique number, we used a ternary operator.

We also change parseInt(strNumber) into +strNumber, which is the shorthand for parsing int.

That ends our article in Solving 6th kyu Codewars problem using ES6.

Check out the 7th kyu version of this article: http://onecompileman.com/blogs/3